<template>
  <div class="newsmanageIndex">
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <span>这个专题不存在，是否要创建？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">不是</el-button>
        <el-button
          type="primary"
          @click="(dialogVisible = false), (dialogVisible1 = true)"
          >是</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="新增专题的辅助信息"
      :visible.sync="dialogVisible1"
      :before-close="handleClose1"
    >
      <!-- <span>请输入你要新增专题的辅助信息，用空格分割</span> -->
      <el-input
        v-model="info_input"
        placeholder="请输入你要新增专题的辅助信息，用空格分割"
        style="width: 500px"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="(dialogVisible1 = false), createTopic()"
          >是</el-button
        >
      </span>
    </el-dialog>
    <div>
      <el-input
        v-model="advanced_input"
        placeholder="请输入你要查询的专题"
        style="width: 500px"
      ></el-input>
      <button class="bbutton" @click="advanced_find">查询</button>
    </div>
    <div>
      <el-table
        v-loading="loading"
        ref="table"
        :data="
          tableData.slice((currentPage - 1) * pageSize, pageSize * currentPage)
        "
        border
        style="width: 100%"
      >
        <el-table-column prop="specialtopic" label="专题名"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <button
              class="bbutton"
              @click="morenews1topic(scope.row)"
              style="float: left"
            >
              更多
            </button>
            <button
              class="bbutton"
              @click="deletenews1topic(scope.row)"
              style="float: left"
            >
              删除
            </button>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <span v-if="scope.row.specialtopic == currentIndex">
              <el-button type="text" @click="toogleExpand(scope.row, '收起')"
                >展开/收起</el-button
              >
            </span>
            <span v-else>
              <el-button type="text" @click="toogleExpand(scope.row, '展开')"
                >展开/收起</el-button
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="1">
          <template slot-scope="prop">
            <el-table
              border
              :data="prop.row.news_list.data.slice(0, topicSize)"
            >
              <el-table-column prop="news_id" label="id" width="100">
              </el-table-column>
              <el-table-column prop="title" label="标题" width="300">
              </el-table-column>
              <el-table-column
                prop="content"
                label="内容"
                width="500"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="detailnews(scope.$index, scope.row)"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 30px">
        <el-pagination
          background
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="total"
          @current-change="current_change"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      dialogVisible1: false,
      currentIndex: null,
      form: {
        news_id: "",
        title: "",
        content: "",
      },
      tableData1: [],
      tableData2: [],
      tableData: [{ specialtopic: "", news_list: [] }],
      topicSize: 3,
      text: "",
      advanced_input: "",
      currentPage: 1,
      pageSize: 5,
      total: 0,
      info_input: "",
    };
  },
  created: function () {
    this.load_topicdata();
    //console.log("tabledata",this.tableData)
  },
  methods: {
    morenews1topic(row) {
      console.log("数据为：", row);
      this.$router.push({
        name: "morenews1topic",
        query: {
          specialtopic: row.specialtopic,
          news_list: row.news_list.data,
        },
      });
    },
    detailnews(index, row) {
      const self = this;
      this.$router.push({
        name: "NewsScan",
        query: {
          id: row.news_id,
          title: row.title,
          source: row.source,
          url: row.url,
          publish_time: row.publish_time,
          category: row.category,
          content: row.content,
          keywords: row.keywords,
          sentiment: row.sentiment,
        },
      });
    },
    toogleExpand(row, text) {
      let $table = this.$refs.table;
      if (text == "展开") {
        this.currentIndex = row.specialtopic;
        this.Text = "收起";
      } else {
        this.currentIndex = null;
        this.Text = "展开";
      }
      $table.toggleRowExpansion(row);
    },
    get_newslist(specialtopic, i) {
      const self = this;
      self
        .$axios({
          method: "post",
          url: "/api/topic/topic_search",
          data: {
            specialtopic: specialtopic,
          },
        })
        .then((res) => {
          // console.log('res[',i,']:',res)
          this.$set(this.tableData, i, {
            specialtopic: this.tableData1[i].specialtopic,
            news_list: res.data,
          });
        })
        .catch((e) => {
          // console.log('e:',e)
          this.$set(this.tableData, i, {
            specialtopic: this.tableData1[i].specialtopic,
            news_list: new Object({ data: [] }),
          });
          // this.tableData[i].specialtopic=tableData1[i].specialtopic
          // this.tableData[i].news_list=[]
        });
    },
    load_topicdata() {
      const self = this;
      self
        .$axios({
          method: "post",
          url: "/api/topic/all_topics",
        })
        .then((res) => {
          console.log("alldata_res:", res);
          var tmptable = res.data.data;
          for (let i = 0; i < tmptable.length - 1; i++) {
            var tmp = tmptable[i];
            var target = Math.random() * (tmptable.length - i) + i;
            target = parseInt(target);
            tmptable[i] = tmptable[target];
            tmptable[target] = tmp;
            //    console.log("target:",target)
            //    console.log("tmp:",tmp)
            //    console.log("tmptable[i]:",tmptable[i])
          }
          this.tableData1 = tmptable;
          console.log("打乱之后的数据为：", this.tableData1);
          for (var i = 0; i < this.tableData1.length; i++) {
            this.get_newslist(this.tableData1[i].specialtopic, i);
          }
          if (res.data.data.length == 0) {
            this.tableData = [];
            this.tableData1 = [];
          }
          console.log("tableData:", this.tableData);
          this.total = tmptable.length;
          // console.log("total:",this.total)
        });
    },
    advanced_find() {
      if (this.advanced_input.trim() == "") {
        alert("输入为空！");
      } else {
        console.log("self.advanced_input:", this.advanced_input);
        const self = this;
        self
          .$axios({
            method: "post",
            url: "/api/topic/topic_search",
            data: {
              specialtopic: self.advanced_input.trim(),
            },
          })
          .then((res) => {
            console.log("res:", res);
            if (res.data.statusCode == -1 || res.data.statusCode == -2) {
              alert(res.data.message);
            } else if (res.data.statusCode == 0) {
              this.dialogVisible = true;
            } else if (res.data.statusCode == 1) {
              console.log("查找成功");
              this.$router.push({
                name: "morenews1topic",
                query: {
                  specialtopic: this.advanced_input,
                  news_list: res.data.data,
                },
              });
            }
            // window.location.reload();
          })
          .catch((e) => {
            alert(e.response.data.message);
          });
      }
    },
    handleClose() {
      this.$confirm("确定关闭吗")
        .then(() => {
          // function(done)，done 用于关闭 Dialog
          done();
        })
        .catch((ress) => {
          if (ress != "cancel") {
            this.dialogVisible = false;
          }
        });
    },
    handleClose1() {
      this.$confirm("确定关闭吗")
        .then(() => {
          // function(done)，done 用于关闭 Dialog
          done();
          console.log("点击取消时触发1");
        })
        .catch((res) => {
          if (res != "cancel") {
            this.dialogVisible1 = false;
            console.log("点击确定时触发1");
          }
        });
    },
    createTopic() {
      this.loading = true;
      const self = this;
      console.log("辅助关键词:'", this.info_input, "'");
      console.log("辅助关键词长度:", this.info_input.length);
      self
        .$axios({
          method: "post",
          url: "/api/topic/create_topic",
          data: {
            specialtopic: self.advanced_input,
            detail: this.info_input,
          },
        })
        .then((res) => {
          if (res.data.statusCode < 0) alert(res.data.message);
          else console.log("创建成功！，创建数据为:", res);
          this.loading = false;
          this.$router.go();
          // window.location.reload()
        })
        .catch((e) => {
          alert(e.response.data.message);
        });
    },
    deletenews1topic(row) {
      const self = this;
      self
        .$axios({
          method: "post",
          url: "/api/topic/delete_Topic",
          data: {
            specialtopic: row.specialtopic,
          },
        })
        .then((res) => {
          //window.location.reload()
        })
        .catch((e) => {
          alert(e.response.data.message);
        });
      this.$router.go();
    },
    current_change: function (currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>

